import React, { useState } from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
import instance from '../../api/request';
import { useNavigate } from 'react-router-dom';
// import { useDispatch } from 'react-redux';
// import { Toolkit } from '../../store/city/Index';
// import './index.css'
import './index.scss'
function Index() {
// const [img,setimg]=useState('https://ts1.tc.mm.bing.net/th/id/OIP-C.amjuZDwpccCqqjORqDkIRgHaEJ?w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2')
// //完成登录页面的布局， 可以点击图片换一换随机背景图片
// const huang=()=>{
//     setimg(img=='https://ts1.tc.mm.bing.net/th/id/OIP-C.amjuZDwpccCqqjORqDkIRgHaEJ?w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2' ? 'https://ts1.tc.mm.bing.net/th/id/OIP-C.Nj6o69waOC3JTbebyCu-hgHaEc?w=322&h=193&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2' : 'https://ts1.tc.mm.bing.net/th/id/OIP-C.amjuZDwpccCqqjORqDkIRgHaEJ?w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2')
// }
const [img,setIng]=useState('https://ts1.tc.mm.bing.net/th/id/OIP-C.amjuZDwpccCqqjORqDkIRgHaEJ?w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2')
const  huang=()=>{
  setIng(img=='https://ts1.tc.mm.bing.net/th/id/OIP-C.amjuZDwpccCqqjORqDkIRgHaEJ?w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2'?'https://ts1.tc.mm.bing.net/th/id/OIP-C.Nj6o69waOC3JTbebyCu-hgHaEc?w=322&h=193&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2':'https://ts1.tc.mm.bing.net/th/id/OIP-C.amjuZDwpccCqqjORqDkIRgHaEJ?w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2')
}
  const  navigate=useNavigate()
  // const dispatch=useDispatch()
  const onFinish = values => {
    console.log('Success:', values);
    instance.post('/login',values).then((res)=>{
      if(res.status==200){
        alert('登陆成功')
        localStorage.setItem('token',res.data.token)
        localStorage.setItem('username',res.data.username)
        // 7.登陆成功之后， 用户信息存储到redux-toolkit
        // dispatch(Toolkit(res.data.token))
        navigate('/zhu')
      }else{
        alert('登录失败')
      }
    })
  };
  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  return (
     <div className='box'>
           <img src={img} alt="" />
         <div style={{textAlign:"center"}}>
       <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <div >
    <h2 style={{textAlign:"center"}}>Admin Pro <p style={{color:"white"}}>idjdndskos 企业级中台前端设计结局方案</p></h2> 
    <Form.Item
      label="账号"
      name="account"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="密码"
      name="password"
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item name="remember" valuePropName="checked" label={null}>
      <Checkbox>Remember me</Checkbox>
    </Form.Item>

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit" style={{width:"400px"}}>
        Login
      </Button>
    </Form.Item>
<div>
  eththrthr 
</div>
    </div>
   
  </Form>
       <Button onClick={huang}>换一换</Button>
    </div>
        </div>
   
  )
}

export default Index
